<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/naive-ui"></script>
</head>

<body>
    <div id="app">


        <div style="width:800px ;height: 800px;">
            <n-carousel effect="card" prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
                next-slide-style="transform: translateX(50%) translateZ(-800px);" style="height: 240px"
                :show-dots="false">
                <n-carousel-item :style="{ width: '60%' }">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg">
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg">
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg">
                </n-carousel-item>
                <n-carousel-item :style="{ width: '60%' }">
                    <img class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg">
                </n-carousel-item>
            </n-carousel>
        </div>
    </div>
    <script>
        const App = {
            setup() {
                return {
                    message: 'naive-我试试'
                }
            }
        }
        const app = Vue.createApp(App)
        app.use(naive)
        app.mount('#app')
    </script>
    <style>
        .carousel-img {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</body>

</html>